<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="utf-8">
	<title>首页</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<link rel="stylesheet" href="../../component/pear/css/pear.css" />
	<link rel="stylesheet" href="../../admin/css/other/console2.css" />

	<link href="../../lyear/css/bootstrap.min.css" rel="stylesheet">
	<link href="../../lyear/css/materialdesignicons.min.css" rel="stylesheet">
	<link href="../../lyear/css/style.min.css" rel="stylesheet">
</head>
<body class="pear-container">
<div class="layui-row layui-col-space10">
	<div class="layui-col-md8">
		<div class="layui-row layui-col-space10">
			<div class="layui-col-md8">
					<div class="layui-carousel" id="test10">
						<div carousel-item="">
							<div><img src="../../admin/images/v21_new.jpg" height="438"></div>
							<div><img src="../../admin/images/88_new.jpg" height="438"></div>
							<div><img src="../../admin/images/v22_new.jpg" height="438"></div>
							<div><img src="../../admin/images/v23_new.jpg" height="438"></div>
							<div><img src="../../admin/images/dddddd_new.jpg" height="438"></div>
							<div><img src="../../admin/images/ffff_new.jpg" height="438"></div>
							<div><img src="../../admin/images/ggggggg_new.jpg" height="438"></div>
						</div>
					</div>
			</div>
			<div class="layui-col-md4">
				<div class="layui-card">
					<div class="layui-card-header">
						网站概览
					</div>
					<div class="layui-card-body">
						<div class="layui-row layui-col-space1">
							<div class="layui-col-md12 layui-col-sm12 layui-col-xs12">
								<div class="pear-card2">
									<div class="title">在线人数</div>
									<div class="count pear-text" id="value1">0</div>
								</div>
							</div>
							<div class="layui-col-md12 layui-col-sm12 layui-col-xs12">
								<div class="pear-card2">
									<div class="title">今日访问</div>
									<div class="count pear-text" id="value2">0</div>
								</div>
							</div>
							<div class="layui-col-md12 layui-col-sm12 layui-col-xs12">
								<div class="pear-card2">
									<div class="title">历史访问</div>
									<div class="count pear-text" id="value3">0</div>
								</div>
							</div>
							<div class="layui-col-md12 layui-col-sm12 layui-col-xs12">
								<div class="pear-card2">
									<div class="title">注册人数</div>
									<div class="count pear-text" id="value4">0</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="layui-col-md12">
				<div class="layui-card">
					<div class="layui-card-body">
						<div class="layui-tab custom-tab layui-tab-brief" lay-filter="docDemoTabBrief">
							<div id="echarts-records" style="background-color:#ffffff;min-height:400px;"></div>
						</div>
					</div>
				</div>
				<div class="layui-card">
					<div class="layui-card-header">
						访问记录
					</div>
					<div class="layui-card-body">
						<table id="role-table" lay-filter="role-table"></table>
					</div>
				</div>
			</div>
		</div>
	</div>

	<div class="layui-col-md4">
		<div class="col-md-12 col-lg-12">
			<div class="card text-white bg-primary">
				<header class="card-header">
					<div class="card-title">将进酒 · 李白</div>
				</header>

				<div class="card-body">
					<p>君不见，黄河之水天上来，奔流到海不复回。君不见，高堂明镜悲白发，朝如青丝暮成雪！</p><p>人生得意须尽欢，莫使金樽空对月。天生我材必有用，千金散尽还复来。</p>
				</div>
			</div>
		</div>

		<div class="col-md-12 col-lg-12">
			<div class="card text-muted bg-secondary">
				<header class="card-header">
					<div class="card-title">The Answer to the Years · Lutpulla·Mutallip</div>
				</header>

				<div class="card-body">
					<p>
						Time is running too fast to stay for a moment.
						The fastest pace of time is the years.</p>
					<p>
						The running water and the breaking dawn
						will never come back.
						The passing years are the worst thieves who steal lives.</p>
					<p>
						Stealing and then running away
						without looking back.
						Rushing away one after another.</p>

					<p>
						Before the larks fly In the garden of youth
						The leaves have been withered and the branches have become bald.</p>
				</div>
			</div>
		</div>

		<div class="col-md-12 col-lg-12">
			<div class="card text-white bg-success">
				<header class="card-header">
					<div class="card-title">木兰花 · 纳兰性德</div>
				</header>

				<div class="card-body">
					<p>人生若只如初见，何事秋风悲画扇。等闲变却故人心，却道故人心易变。</p><p>骊山语罢清宵半，泪雨霖铃终不怨。何如薄幸锦衣郎，比翼连枝当日愿。</p>
				</div>
			</div>
		</div>

		<div class="col-md-12 col-lg-12">
			<div class="card text-white bg-info">
				<header class="card-header">
					<div class="card-title">白驹 · 佚名</div>
				</header>

				<div class="card-body">
					<p>皎皎白驹，食我场苗。絷之维之，以永今朝。所谓伊人，于焉逍遥？</p><p>皎皎白驹，食我场藿。絷之维之，以永今夕。所谓伊人，于焉嘉客？</p>
				</div>
			</div>
		</div>

		<div class="col-md-12 col-lg-12">
			<div class="card text-white bg-warning">
				<header class="card-header">
					<div class="card-title">长恨歌 · 白居易</div>
				</header>

				<div class="card-body">
					<p>临别殷勤重寄词，词中有誓两心知。七月七日长生殿，夜半无人私语时。</p><p>在天愿作比翼鸟，在地愿为连理枝。天长地久有时尽，此恨绵绵无绝期。</p>
				</div>
			</div>
		</div>

		<div class="col-md-12 col-lg-12">
			<div class="card text-white bg-danger">
				<header class="card-header">
					<div class="card-title">镜中 · 张枣</div>
				</header>

				<div class="card-body">
					<p>只要想起一生中后悔的事，梅花便落了下来，比如看她游泳到河的另一岸，比如登上一株松木梯子。</p><p>危险的事固然美丽，不如看她骑马归来。望着窗外，只要想起一生中后悔的事，梅花便落满了南山。</p>
				</div>
			</div>
		</div>

	</div>

</div>
<script src="../../component/layui/layui.js" charset="utf-8"></script>
<script src="../../component/pear/pear.js"></script>
<script>

	layui.use(['carousel', 'form'], function(){
		var carousel = layui.carousel, form = layui.form;

		carousel.render({
			elem: '#test10'
			,width: '100%'
			,height: '438px'
			,interval: 5000
		});
	})

	// 下面是整体页面的一个布局
	layui.use(['layer', 'echarts', 'carousel', 'element', 'table', 'count'], function() {
		var $ = layui.jquery,
				layer = layui.layer,
				element = layui.element,
				echarts = layui.echarts,
				table = layui.table,
				count = layui.count,
				carousel = layui.carousel;

		let cols = [
			[{
				type: 'checkbox'
			},
				{
					title: '账户名',
					field: 'username',
					align: 'center',
					width: 100
				},
				{
					title: '访问时间',
					field: 'logtime',
					align: 'center'
				},
				{
					title: '描述',
					field: 'userface',
					align: 'center'
				},
				{
					title: '账户状态',
					field: 'enabled',
					align: 'center',
				}
			]
		]

		// 这儿是登陆记录表格的获取地址
		table.render({
			elem: '#role-table',
			url: '/Admin/consoleLog',
			page: true,
			cols: cols,
			skin: 'line',
			limit: 5,
			limits: [5, 10, 15, 20]
		});

		var echartsRecords = echarts.init(document.getElementById('echarts-records'), 'walden');

		$("body").on("click", "[data-url]", function() {
			parent.layui.tab.addTabOnlyByElem("content", {
				id: $(this).attr("data-id"),
				title: $(this).attr("data-title"),
				url: $(this).attr("data-url"),
				close: true
			})
		})


		let bgColor = "#fff";
		let color = [
			"#0090FF",
			"#36CE9E",
			"#FFC005",
			"#FF515A",
			"#8B5CFF",
			"#00CA69"
		];
		let echartData = [{
			name: "1",
			value1: 500,
			value2: 1150
		},
			{
				name: "2",
				value1: 650,
				value2: 1150
			},
			{
				name: "3",
				value1: 1750,
				value2: 1000
			},
			{
				name: "4",
				value1: 850,
				value2: 900
			},
			{
				name: "5",
				value1: 1200,
				value2: 980
			},
			{
				name: "6",
				value2: 1150
			},
			{
				name: "7",
				value2: 1050
			},
			{
				name: "8",
				value2: 900
			},
			{
				name: "9",
				value2: 750
			},
			{
				name: "10",
				value2: 1350
			},
			{
				name: "11",
				value2: 1000
			},
			{
				name: "12",
				value2: 1000
			}
		];

		let xAxisData = echartData.map(v => v.name);
		//  ["1", "2", "3", "4", "5", "6", "7", "8"]
		let yAxisData1 = echartData.map(v => v.value1);
		// [100, 138, 350, 173, 180, 150, 180, 230]
		let yAxisData2 = echartData.map(v => v.value2);
		// [233, 233, 200, 180, 199, 233, 210, 180]
		const hexToRgba = (hex, opacity) => {
			let rgbaColor = "";
			let reg = /^#[\da-f]{6}$/i;
			if (reg.test(hex)) {
				rgbaColor =
						`rgba(${parseInt("0x" + hex.slice(1, 3))},${parseInt(
								"0x" + hex.slice(3, 5)
						)},${parseInt("0x" + hex.slice(5, 7))},${opacity})`;
			}
			return rgbaColor;
		}

		option = {
			backgroundColor: bgColor,
			color: color,
			legend: {
				right: 10,
				top: 10
			},
			tooltip: {
				trigger: "axis",
				formatter: function(params) {
					let html = '';
					params.forEach(v => {
						html +=
								`<div style="color: #666;font-size: 14px;line-height: 24px">
					                <span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${color[v.componentIndex]};"></span>
					                ${v.seriesName}.${v.name}
					                <span style="color:${color[v.componentIndex]};font-weight:700;font-size: 18px">${v.value}</span>
					                行`;
					})



					return html
				},
				extraCssText: 'background: #fff; border-radius: 0;box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);color: #333;',
				axisPointer: {
					type: 'shadow',
					shadowStyle: {
						color: '#ffffff',
						shadowColor: 'rgba(225,225,225,1)',
						shadowBlur: 5
					}
				}
			},
			grid: {
				top: 100,
				containLabel: true
			},
			xAxis: [{
				type: "category",
				boundaryGap: false,
				axisLabel: {
					formatter: '{value}月',
					textStyle: {
						color: "#333"
					}
				},
				axisLine: {
					lineStyle: {
						color: "#D9D9D9"
					}
				},
				data: xAxisData
			}],
			yAxis: [{
				type: "value",
				name: '代码量：行',
				axisLabel: {
					textStyle: {
						color: "#666"
					}
				},
				nameTextStyle: {
					color: "#666",
					fontSize: 14,
					lineHeight: 40
				},
				splitLine: {
					lineStyle: {
						type: "dashed",
						color: "#E9E9E9"
					}
				},
				axisLine: {
					show: false
				},
				axisTick: {
					show: false
				}
			}],
			series: [{
				name: "2021",
				type: "line",
				smooth: true,
				// showSymbol: false,/
				symbolSize: 8,
				zlevel: 3,
				lineStyle: {
					normal: {
						color: color[0],
						shadowBlur: 3,
						shadowColor: hexToRgba(color[0], 0.5),
						shadowOffsetY: 8
					}
				},
				areaStyle: {
					normal: {
						color: new echarts.graphic.LinearGradient(
								0,
								0,
								0,
								1,
								[{
									offset: 0,
									color: hexToRgba(color[0], 0.3)
								},
									{
										offset: 1,
										color: hexToRgba(color[0], 0.1)
									}
								],
								false
						),
						shadowColor: hexToRgba(color[0], 0.1),
						shadowBlur: 10
					}
				},
				data: yAxisData1
			}, {
				name: "2020",
				type: "line",
				smooth: true,
				// showSymbol: false,
				symbolSize: 8,
				zlevel: 3,
				lineStyle: {
					normal: {
						color: color[1],
						shadowBlur: 3,
						shadowColor: hexToRgba(color[1], 0.5),
						shadowOffsetY: 8
					}
				},
				areaStyle: {
					normal: {
						color: new echarts.graphic.LinearGradient(
								0,
								0,
								0,
								1,
								[{
									offset: 0,
									color: hexToRgba(color[1], 0.3)
								},
									{
										offset: 1,
										color: hexToRgba(color[1], 0.1)
									}
								],
								false
						),
						shadowColor: hexToRgba(color[1], 0.1),
						shadowBlur: 10
					}
				},
				data: yAxisData2
			}]
		};

		echartsRecords.setOption(option);

		window.onresize = function() {
			echartsRecords.resize();
		}

		// 这儿是网站概览处的数字
		$.ajax({
			url:"/Admin/consoleWeb",
			type:"get",
			contentType:"application/json",
			dataType:"json",
			success:function(res){
				console.log(res);
				if(res.code === 0){
					count.up("value1", {
						time: 1000,
						num: parseInt(res.data.value1),
						regulator: 50
					})

					count.up("value2", {
						time: 1000,
						num: parseInt(res.data.value2),
						regulator: 50
					})

					count.up("value3", {
						time: 1000,
						num: Math.floor(parseFloat(res.data.value3)),
						regulator: 50
					})

					count.up("value4", {
						time: 1000,
						num: parseInt(res.data.value4),
						regulator: 50
					})
				}else{
					layer.msg(result.msg, {
						icon: 2,
						time: 1000
					});
				}
			}
		});

	});
</script>
</body>
</html>
